<template>
	<page-meta :page-style="'overflow:' + (showPopup ? 'hidden' : 'visible')"></page-meta>
	<view class="container">
		<uni-nav-bar title="控制台" fixed statusBar :border="false" leftIcon='back' @clickLeft="goBackPage"></uni-nav-bar>
		<text class="tip">
			Tip：管理员操作页面，可在此修改平台数据
		</text>
		<title text="数据录入"></title>
		<uni-list :border="false">
			<uni-list-item showArrow clickable link="navigateTo" to="./components/typeInfo/index" title="录入分类信息" />
			<uni-list-item showArrow clickable link="navigateTo" to="./components/goodsInfo/index" title="录入商品信息" />
		</uni-list>
		<title text="运动页"></title>
		<uni-list :border="false">
			<uni-list-item showArrow clickable link="navigateTo" to="./components/swiper/index" title="轮播图" />
			<uni-list-item showArrow clickable @click="() => openPopup(popupType.notice)" title="通知" />
			<uni-list-item showArrow clickable link="navigateTo" to="" title="热门推荐" />
			<uni-list-item showArrow clickable @click="() => openPopup(popupType.story)" title="品牌故事" />
		</uni-list>
		<title text="个人页"></title>
		<uni-list :border="false">
			<uni-list-item showArrow clickable @click="() => openPopup(popupType.phone)" title="联系方式" />
		</uni-list>

		<uni-popup class="popup" ref="popup" :isMaskClick='false' safeArea backgroundColor="#fff"
			borderRadius="6px 6px 0 0" @change="changeShowPopup">
			<uni-forms ref="popupForm" :model="popupFormData">
				<view class="popup-options">
					<text class="popup-btn" size="mini" @click="canclePopup">取消</text>
					<text>{{inputOptions.name}}</text>
					<text class="popup-btn popup-submitBtn" @click="submitPopup">确定</text>
				</view>
				<view class="popup-content">
					<uni-forms-item label="开启状态" name="isOpen" :rules="[{required: true, errorMessage: '请选择状态'}]">
						<uni-data-select v-model="popupFormData.isOpen" :clear="false" placeholder='请选择'
							:localdata="[{value: 0, text:'关闭'},{value: 1, text:'开启'}]">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="内容" name="data">
						<uni-easyinput v-bind:type="inputOptions.type" v-bind:maxlength="inputOptions.maxlength"
							v-model="popupFormData.data" autoHeight placeholder="请输入内容" trim></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		reactive,
		ref
	} from 'vue';
	import {
		popupType
	} from './const.js'
	import {
		phoneNumber
	} from '/pages/personal/mock.js'

	const {
		proxy
	} = getCurrentInstance()

	const showPopup = ref(false)
	const popupFormData = ref({
		isOpen: 0,
		data: ''
	})
	const inputOptions = ref({})

	const goBackPage = () => uni.navigateBack()

	// 改变 Popup 弹窗状态时的事件处理
	const changePopup = async (status, type = 'top', opts) => {
		if (typeof status === 'boolean') {
			if (status) {
				proxy.$refs.popup.open(type)
				let obj = {
					isOpen: 0,
					data: ''
				}
				try {
					const basicSetting = uniCloud.importObject('mall-basic-setting')
					const res = await basicSetting.getData({
						key: opts.key
					})
					if (res?.data) {
						obj = res.data
					}
				} catch (err) {
					console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
				}
				popupFormData.value = obj
			} else {
				proxy.$refs.popup.close()
				popupFormData.value = {
					isOpen: 0,
					data: ''
				}
				inputOptions.value = {}
			}
		}
	}

	// 打开 Popup 弹窗
	const openPopup = (options) => {
		inputOptions.value = options
		changePopup(true, options.position, options)
	}

	// 监听 Popup 弹窗状态改变
	const changeShowPopup = (e) => showPopup.value = e.show

	// 取消保存 Popup 弹窗内容
	const canclePopup = () => changePopup(false)

	// 保存 Popup 弹窗内容
	const submitPopup = () => {
		proxy.$refs.popupForm.validate(async (err, formData) => {
			if (!err) {
				try {
					const basicSetting = uniCloud.importObject('mall-basic-setting', {
						customUI: true,
					})
					await basicSetting.addData({
						data: {
							data: popupFormData.value.data,
							isOpen: popupFormData.value.isOpen,
						},
						key: inputOptions.value.key
					})
					uni.showToast({
						icon: 'success',
						title: '保存成功'
					})
					changePopup(false)
				} catch (err) {
					console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import url("../../styles/common.scss");

	.container {
		width: 100%;
		min-height: 100vh;
		background-color: var(--background-color);
	}

	.tip {
		display: block;
		color: #666;
		background-color: white;
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
		line-height: 28px;
		padding: 6px 12px;
		font-size: 14px;
	}

	.popup {
		&-options {
			padding: 12px 10px 26px;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		&-content {
			padding: 0 10px 12px;
		}

		&-submitBtn {
			color: var(--primary-color);
		}

		&-btn {
			font-size: 14px;
		}
	}
</style>